<template>
	<!--歌单-->
	<div class="music_box4">
		<div class="musicTitle">
			<span></span>
			<h4>你的故事在这歌里</h4>
			<div class="hunayp">换一批</div>
		</div>
		<div class="music_gedan">
			<ul class="qc">
				<li v-if="index > 45 && index <= 50" v-for="item,index in type">
					<div class="images">
						<router-link to="/SongListB">
							<img :src="item.pic_big" />
							<div class="shout"><img src="../images/bof.png" /></div>
							<div class="erji"><img src="../images/erji.png" alt=""></div>
						</router-link>
					</div>
					<div class="content">{{item.title}}</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	export default {
		name: "music_box4",
		data() {
			return {
				name: "",
				type: [""],
			}
		},
		created() {
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=1&offset=0&size=50", null, (err, res) => {
				if(err) {
					console.log(err)
					alert(222)

				} else {
					console.log(res)
					this.type = res.song_list;
					//					this.name = res.billboard.name
					//					this.song_list = res.song_list
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.music_box4 {
		width: 93%;
		margin: 0 auto;
		.musicTitle {
			width: 100%;
			padding-top: 16.3%;
			position: relative;
			white-space: nowrap;
			box-sizing: border-box;
			span {
				position: absolute;
				top: 50%;
				left: 0;
				background: #fc2c4c;
				transform: translate(0, -50%);
				width: 0.6%;
				padding-top: 5%;
				display: inline-block;
			}
			h4 {
				position: absolute;
				top: 50%;
				left: 3.8%;
				line-height: 16px;
				transform: translate(0, -50%);
				width: 94%;
				font-size: 16px;
				color: #222222;
				font-weight: 600;
				display: inline-block;
			}
			.hunayp {
				font-weight: 400;
				font-size: 12px;
				line-height: 12px;
				position: absolute;
				right: 2.6%;
				color: #e8265a;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
		.music_gedan {
			width: 100%;
			margin: 0 auto;
			ul {
				width: 100%;
				li {
					width: 48.8%;
					float: left;
					margin-right: 2.2%;
					.images {
						box-sizing: border-box;
						width: 100%;
						/*padding-top: 33%;*/
						padding-top: 102%;
						position: relative;
						top: 0;
						left: 0;
						overflow: hidden;
						img {
							width: 100%;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
					.erji {
						width: 30px;
						height: 20px;
						position: absolute;
						left: 7%;
						bottom: 3%;
						img {
							width: 60%;
						}
					}
					.content {
						font-weight: 400;
						line-height: 12px;
						margin: 5% 0;
						font-size: 12px;
						color: #464646;
						text-align: center;
					}
					&:nth-child(2n) {
						margin: 0;
					}
				}
			}
		}
	}
	
	.shout {
		width: 16%;
		height: 16%;
		position: absolute;
		bottom: 4.6%;
		right: 3.6%;
		border-radius: 50%;
		img {
			width: 100%;
		}
	}
	
	.qc::after {
		content: "";
		width: 100%;
		display: block;
		clear: both;
	}
</style>